<template>
	<view class="page-bg">
		<u-navbar :autoBack="true" :border="false" :placeholder="true">
			<view slot="center" class="fb c3 f16">
				订单详情
			</view>
		</u-navbar>
		<view class="">
			<map style="width: 100%; height: 200px;" :markers="covers" :iconPath="'../../static/order/location.png'"
				:latitude="orderInfo.latitude" :longitude="orderInfo.longitude"></map>
			<view class="item-bg">
				<view class="c3 f16 fb ">
					客户信息
				</view>
				<view class="divider-line mt10 mb10" />
				<view class="f-s-b">
					<image src="../../static/order/location-order.png" style="width: 24px;height: 24px;"></image>
					<view class="f1 ml20">
						<view class="fb f16 c3">
							{{orderInfo.contactor}} {{orderInfo.phone}}
						</view>
						<view class="c6 f14 mt10">
							{{orderInfo.province+orderInfo.city+orderInfo.county+orderInfo.address}}
						</view>
					</view>
					<image @click="callPhoneShow(orderInfo.phone)" src="../../static/home/phone.svg" style="width: 20px;height: 20px;"></image>
				</view>
			</view>
			<view class="item-bg p12 mt10">
				<view class="c3 fb f16 ">
					订单信息
				</view>
				<view class="divider-line mb10 mt10" />
				<view class="f-s-b">
					<view class="c6 f14 mt10">
						订单编号：
					</view>
					<view class="fb f14 c3">
						{{orderInfo.orderNo}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						创建时间：
					</view>
					<view class="fb f14 c3">
						{{orderInfo.createTime}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						接单时间：
					</view>
					<view class="fb f14 c3">
						{{orderInfo.takingTime}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						预估总重量：
					</view>
					<view class="fb f14 c3">
						{{Number(orderInfo.expectWeightTal).toFixed(2)}} 
						<!-- {{orderInfo.expectWeightTal}}kg -->
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						预估总金额：
					</view>
					<view class="fb f14 c3">
						¥{{orderInfo.expectAmountTal}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						预约开始时间：
					</view>
					<view class="fb f14 c3">
						{{orderInfo.startTime}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						预约结束时间：
					</view>
					<view class="fb f14 c3">
						{{orderInfo.endTime}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						接单时间：
					</view>
					<view class="fb f14 c3">
						{{orderInfo.takingTime}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						到达时间：
					</view>
					<view class="fb f14 c3">
						{{orderInfo.arriveTime?orderInfo.arriveTime:''}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						完成时间：
					</view>
					<view class="fb f14 c3">
						{{orderInfo.completeTime?orderInfo.completeTime:''}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						订单状态：
					</view>
					<view class="fb f14 cr">
						{{status[orderInfo.status]}}
					</view>
				</view>
				<!-- <view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						回收人员：
					</view>
					<view class="fb f14 c3">
						王大治
					</view>
				</view> -->
			</view>


			<view class="item-bg p12 mt10">
				<view class="c3 fb f16 ">
					回收信息
				</view>
				<view v-for="item,index in hsUserWasteVoList" :key="index">
					<view class="divider-line mb10 mt10" />
					<view class="f-s-b">
						<view class="c6 f14 mt10">
							物品类型：
						</view>
						<view class="fb f14 c3">
							{{item.categorizeName}}
						</view>
					</view>
					<view class="f-s-b">
						<view class="c6 f14 mt10">
							计量类型：
						</view>
						<view class="fb f14 c3">
							{{countTypes[item.countType]}}
						</view>
					</view>	
					<view class="f-s-b">
						<view class="c6 f14 mt10">
							计量单位：
						</view>
						<view class="fb f14 c3">
							{{item.unit}}
						</view>
					</view>
					<view class="f-s-b">
						<view class="c6 f14 mt10">
							{{item.countType==0?'预估重量':'数量'}}：
						</view>
						<view class="fb f14 c3">
							{{Number(item.weight).toFixed(2)}} {{item.unit}}
						</view>
					</view>
					<view class="f-s-b mt10">
						<view class="c6 f14 mt10">
							预估金额：
						</view>
						<view class="fb f14 c3">
							¥{{item.amount}}
						</view>
					</view>
					<view class="f-s-b mt10">
						<view class="c6 f14 mt10">
							物品图片：
						</view>
						<u--image :src="item.imgUrl" width="80px" height="80px"></u--image>
					</view>
				</view>
			</view>

			<view class="f ml20 mr20" style="margin-top: 40px;" v-show="orderInfo.status>0">
				<view class="cancel-circle-btn f1" style="height: 44px;"
					@click="navToView('/pagesA/settlement-order/settlement-order?orderId='+orderInfo.id)"
					v-show="orderInfo.status==4">
					订单结算
				</view>
				<view class="cancel-circle-btn f1 ml20" style="height: 44px;" @click="cancel=true"
				v-if="orderInfo.status == 0 || orderInfo.status == 2 || orderInfo.status < 5 ">
					取消订单
				</view>
				<view class="cancel-circle-btn f1 ml20"
					@click="navToView('/pagesA/order/order-settle-details?id='+orderInfo.id)" style="height: 44px;"
					v-show="orderInfo.status==4">
					结算详情
				</view>
				<view v-show="orderInfo.status==2" class="sure-circle-btn f1 ml20"
					:style="{background:orderInfo.status!=2?'#eee':'#31EB8D'}" style="height: 44px;"
					@click="orderInfo.status==2?showArrive=true:showArrive=false">
					我已到达
				</view>
			</view>
			<view class="f ml20 mr20" style="margin-top: 40px;" v-show="orderInfo.status==0">
				<view class="sure-circle-btn f1 ml20" style="height: 44px;" @click="handleOrder('2')">
					立即抢单
				</view>
			</view>

		</view>
		<u-popup :round="10" :show="showArrive" mode="center" @close="close">
			<view class="phone-bg">
				<view class="fb c3 f18 f-f-c-c mt20">
					是否确认到达？
				</view>
				<view class="f-s-b mt20">
					<view class="c3" @click="showArrive=false">
						取消
					</view>
					<view class="cm" @click="handleOrder('4')">
						确定
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :round="10" :show="cancel" mode="center" @close="close">
			<view class="phone-bg">
				<view class="fb c3 f18 f-f-c-c mt20">
					是否取消当前订单
				</view>
				<view class="f-s-b mt20">
					<view class="c3" @click="cancel=false">
						取消
					</view>
					<view class="cm" @click="handleOrder('3')">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showArrive: false,
				cancel: false,
				id: '',
				countTypes:['重量','数量'],
				status: ['待接单', '', '待服务', '', '服务中', '成功-待评价', '已完成', '服务失败-待评价', '服务失败', '超时结束'],
				orderInfo: {
					orderNo:'',
					createTime:'',
					takingTime:'',
					expectWeightTal:0,
					expectAmountTal:0,
					startTime:'',
					endTime:'',
					arriveTime:'',
					completeTime:'',
					contactor:'',
					phone:'',
					province:'',
					city:'',
					address:'',
					county:'',
					status:0,
				},
				hsUserWasteVoList: [],
				covers: [],
			}
		},
		onLoad(option) {
			this.id = option.id
			console.log(this.id, 'id')
			this.loadOrderInfo()
		},
		onShow() {
			if (this.id) {
				this.loadOrderInfo()
			}
			// this.getScollHeight()
		},
		methods: {
			callPhoneShow(item) {
				uni.makePhoneCall({
					phoneNumber: item
				})
			},
			loadOrderInfo() {
				let that = this
				let point = {
					width: 32,
					height: 55,
					id: 1,
					iconPath: '/static/posi.png',
				}
				that.request("get", "riderAppOrder/app/" + that.id, uni.getStorageSync('token'), null).then(
					res => {
						console.log(res)
						if (res.code === 200) {
							that.orderInfo = res.data
							that.hsUserWasteVoList = res.data.hsUserWasteVoList
							point.longitude = that.orderInfo.longitude
							point.latitude = that.orderInfo.latitude
							that.covers.push(point)
						}
					})
			},
			handleOrder(status) {
				this.showArrive = false
				uni.showLoading({

				})
				let params = {
					id: this.orderInfo.id,
					status: status
				}
				let that = this
				that.request("get", "riderAppOrder/app/dealOrder", uni.getStorageSync('token'), params).then(
					res => {
						if (res.code === 200) {
							that.allOrder = res.rows
							that.loadOrderInfo()
							uni.showToast({
								title: res.msg,
								icon: 'success',
								mask: true
							})
						}
						uni.hideLoading()
					})
			},
			navToView(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.item-bg {
		padding: 12px;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}

	.phone-bg {
		width: calc(100vw - 80px);
		margin: 0 auto;
		padding: 20px;
		background: #FFFFFF;
		border-radius: 17px 17px 17px 17px;
		color: #1AC388;
	}
</style>